<template>
  <div class="main">

    <el-descriptions class="margin-top" :title=projectProfile.projectFullName :column="3" border>


      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          项目名称
        </template>
        {{ projectProfile.projectName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          项目经理
        </template>
        {{ projectProfile.projectManagerName }}
      </el-descriptions-item>


      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          华为代表处
        </template>
        {{ projectProfile.deptName }}
      </el-descriptions-item>



      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          已投入（人天）
        </template>
        30
      </el-descriptions-item>



      <el-descriptions-item>

        <template slot="label">
          <i class="el-icon-tickets"></i>
          项目状态
        </template>
        <el-tag size="small">{{ projectProfile.projectStatusName }}</el-tag>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          客户
        </template>
        功能还没做好
      </el-descriptions-item>
     <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          联系地址
        </template>
        功能还没做好
      </el-descriptions-item>

    </el-descriptions>

    <p/>

    <el-row :gutter="20">

      <el-col :span="18"><div class="grid-content">
        <el-descriptions class="margin-top"  :column="2" >

          <el-descriptions-item label="PO号">{{ projectProfile.projectCode }}</el-descriptions-item>
          <el-descriptions-item label="工程号">{{ projectProfile.projectNoCode }}</el-descriptions-item>
          <el-descriptions-item label="创建人">{{ projectProfile.createBy }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ projectProfile.createTime }}</el-descriptions-item>
          <el-descriptions-item label="最后更新人">{{ projectProfile.updateBy }}</el-descriptions-item>
          <el-descriptions-item label="最后更新时间">{{ projectProfile.updateTime }}</el-descriptions-item>

        </el-descriptions>
        <el-descriptions class="margin-top"  :column="1" direction="vertical" >
          <el-descriptions-item label="项目说明">
            <p style="font-family: 华文楷体">
              {{ projectProfile.remark }}
            </p>
          </el-descriptions-item>
        </el-descriptions>
      </div></el-col>

      <el-col :span="6"><div  >

        <div class="grid-content bg-purple myprocard">
          <el-card class="box-card" shadow="always">

            <div slot="header" class="clearfix">
              <span>投入统计</span>
            </div>

            <div class="card-content">
              <div class="left">
                <div class="top">
                  <p>昨日投入：</p>
                  <p>20（人天）</p>
                </div>
                <div class="bottom">
                  <p>总投入：</p>
                  <p>80（人天）</p>
                </div>
              </div>
              <div class="right">
                <div class="top">
                  <p>PO：30（人天）</p>
                </div>
                <div class="bottom">
                  <el-progress
                    type="circle"
                    :width="80"
                    :percentage=90
                  ></el-progress>
                </div>
              </div>
            </div>

          </el-card>

        </div>

      </div></el-col>

    </el-row>

    <p/>
    <p>项目投入概况</p>

    <el-row :gutter="20">

      <el-col :span="24">
        <div class="grid-content">
          <line-chart :chart-data="lineChartData" />
      </div></el-col>

    </el-row>
  </div>
</template>


<script>

import LineChart from "@/views/components/LineChart";
import { updaProjectStatus } from "@/api/system/project";
import { removeProjectUser } from "@/api/system/projectSettings";
import {projectDetail, userList, updateHour} from "@/api/system/projectSettings";

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  }
}
export default {
  components: {
    LineChart
  },
  data() {
    return {
      pjFullName: "沈阳市公安局",
      projectId:0,
      projectProfile:{},
      lineChartData: lineChartData.newVisitis
    };
  },
  created() {
    this.projectId = this.$route.query.projectId;
    console.log(this.projectId);
    this.init();
  },
  methods: {
    init() {
      if (this.projectId == 0 || undefined) {
        this.$message.warning("请先选择项目");
      } else {
        projectDetail(this.projectId).then(res => {
          console.log(res);
          this.projectProfile = res.data;
        });
      }
    },



    deleteRow(index, rows, row) {
      rows.splice(index, 1);
      console.log(index, rows, row);
      let userIds = [];
      userIds = row.userId;
      let data = {
        projectId: this.projectId,
        userIds
      };
      removeProjectUser(data).then(res => {
        console.log(res);
      });
    },
    addpeople() {
      // this.$refs.addPeopleForm.centerDialogVisible=true
      this.$refs.addPeopleForm.open();
      this.$refs.addPeopleForm.projectId = this.projectId;
    },

    unique(newarr) {
      let arr = newarr;
      let result = {};
      let finalResult = [];
      for (let i = 0; i < arr.length; i++) {
        //利用对象的键名无法重复的特点，cppostName是唯一区别的属性值
        result[arr[i].postName]
          ? ""
          : (result[arr[i].postName] = true && finalResult.push(arr[i]));
      }
      return finalResult;
    },
    editprojectdetail() {
      this.$refs.editForm.formdata = this.projectProfile;
      this.$refs.editForm.open();
    },
    handlearchive(state) {
      console.log(state);
      updaProjectStatus(this.projectId, state).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.init();
        }
      });
    },
    eaitManHour() {
      this.dialogVisible = true;
    },
    cancel() {
      this.dialogVisible = false;
      this.resetForm("numberValidateForm");
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.resetForm("numberValidateForm");
          done();
        })
        .catch(_ => {});
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // alert("submit!");
          // console.log(this.hourUnit)
          this.manHour = this.numberValidateForm.manHou;
          let data = {
            manHour: this.numberValidateForm.manHour,
            projectId: this.projectId
          };
          if (this.hourUnit == 0) {
            data.manHour = data.manHour * 8;
          } else if (this.hourUnit == 1) {
            data.manHour = data.manHour * 8 * 22;
          }
          console.log(data);
          updateHour(data).then(res => {
            console.log(res);
            if (res.code == 200) {
              // this.manHour = this.numberValidateForm.manHou;
              this.init();
              this.showCard = 3;
            }
          });
          this.resetForm(formName);
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          this.resetForm(formName);
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
    // setarray(arr) {
    //   const map = {};
    //   // 1、把数组元素作为对象的键存起来（这样就算有重复的元素，也会相互替换掉）
    //   arr.forEach(item => (map[JSON.stringify(item)] = item));

    //   // 2、再把对象的值抽成一个数组返回即为不重复的集合
    //   return Object.keys(map).map(key => map[key]);
    // }
  }

};
</script>

<style scoped lang="scss">

.myprocard {
  // padding: 0 20px;
  display: flex;
  // justify-content: space-between !important;
  align-items: center;
  flex-wrap: wrap;
}
.box-card {
  width: 100%;
  ::v-deep .el-card__body {
    padding: 10px;
  }
  .card-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    .left {
      width: 55%;
    }
    .header-left {
      font-size: 16px;
      font-weight: 800;
    }
    .right {
      width: 45%;
      .top {
        text-align: center;
      }
      .bottom {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .card-footer {
    font-size: 8px;
    .projectpeople {
      display: flex;
      justify-content: space-between;
      white-space: nowrap;
    }
  }
}
</style>
